<template>
    <div class="btn-style-box">
        <ul class="outer-box">
            <li class="group-attribute-name"
                @click="baseGroupName=!baseGroupName">
                <i class="group-icon" :class="baseGroupName ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"/>
                <span>基本</span>
            </li>
            <ul class="inner-box" :class="{'h0': !baseGroupName}">
                <li class="attr-item">
                    <div class="attr-item-label">宽度</div>
                    <div class="block">
                        <el-slider
                            v-model="appearance.base.width"
                            :show-input-controls="false"
                            input-size="mini"
                            show-input
                            :min="34">
                        </el-slider>
                    </div>
                </li>
                <li class="attr-item">
                    <div class="attr-item-label">高度</div>
                    <div class="block">
                        <el-slider
                            v-model="appearance.base.height"
                            :show-input-controls="false"
                            input-size="mini"
                            show-input
                            :min="25">
                        </el-slider>
                    </div>
                </li>
                <li class="attr-item">
                    <div class="attr-item-label">圆角</div>
                    <div class="block">
                        <el-input v-model="appearance.base.radius" size="mini" type="number"/>
                    </div>
                </li>
                <li class="attr-item">
                    <div class="attr-item-label">按钮颜色</div>
                    <div class="block text-four-block color-block">
                        <el-input v-model="appearance.base.btnColor" size="mini" :readonly="true"/>
                        <el-color-picker
                            class="yx-color-picker"
                            v-model="appearance.base.btnColor"
                            show-alpha
                            size="mini"
                            :predefine="predefineColors">
                        </el-color-picker>
                    </div>
                </li>
                <li class="attr-item">
                    <div class="attr-item-label">字体颜色</div>
                    <div class="block text-four-block color-block">
                        <el-input v-model="appearance.base.color" size="mini" :readonly="true"/>
                        <el-color-picker
                            class="yx-color-picker"
                            v-model="appearance.base.color"
                            show-alpha
                            size="mini"
                            :predefine="predefineColors">
                        </el-color-picker>
                    </div>
                </li>
            </ul>
        </ul>
        <ul class="outer-box effect-outer-box">
            <li class="group-attribute-name"
                @click="effectGroupName=!effectGroupName">
                <i class="group-icon" :class="effectGroupName ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"/>
                <span>展示效果</span>
            </li>
            <ul class="inner-box" :class="{'h0': !effectGroupName}">
                <li class="attr-item">
                    <div class="attr-item-label">展示效果</div>
                    <div class="block">
                        <el-select v-model="appearance.effect.value"
                                   style="width: 100%;"
                                   size="mini"
                                   placeholder="默认效果">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </li>
            </ul>
        </ul>
        <ul class="outer-box bgc-outer-box">
            <li class="group-attribute-name"
                @click="bgcGroupName=!bgcGroupName">
                <i class="group-icon" :class="bgcGroupName ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"/>
                <span>背景</span>
            </li>
            <ul class="inner-box" :class="{'h0': !bgcGroupName}">
                <li class="attr-item">
                    <div class="attr-item-label">背景色</div>
                    <div class="block color-block text-three-block">
                        <el-input v-model="appearance.base.btnColor" size="mini" :readonly="true"/>
                        <el-color-picker
                            class="yx-color-picker"
                            v-model="appearance.base.bgColor"
                            show-alpha
                            size="mini"
                            :predefine="predefineColors">
                        </el-color-picker>
                    </div>
                </li>
            </ul>
        </ul>
        <YXPadding style="margin-top: 20px;" :padding="appearance.padding"/>
    </div>
</template>

<script>
    import YXPadding from '../common/contentstyle/Padding.vue';

    export default {
        name: 'BtnStyle',
        components: {
            YXPadding
        },
        props: {
            appearance: {
                type: Object,
                default: _ => {
                    return {
                        base: {
                            width: 90,
                            height: 44,
                            btnColor: 'rgba(248, 89, 89, 1)',
                            bgColor: 'rgba(255, 255, 255, 1)',
                            color: 'rgba(255, 255, 255, 1)',
                            size: '18',
                            radius: '4'
                        },
                        effect: {
                            value: ''
                        },
                        padding: {
                            groupName: '边距',
                            value: {
                                top: 0,
                                right: 0,
                                bottom: 0,
                                left: 0
                            }
                        }
                    };
                }
            }
        },
        data() {
            return {
                bgcGroupName: true,
                baseGroupName: true,
                effectGroupName: true,
                options: [
                    {label: '默认效果', value: ''},
                    {label: '顶部悬浮', value: 'top'},
                    {label: '底部悬浮', value: 'bottom'}
                ],
                predefineColors: [
                    '#ff4500',
                    '#ff8c00',
                    '#ffd700',
                    '#90ee90',
                    '#00ced1',
                    '#1e90ff',
                    '#c71585',
                    'rgba(255, 69, 0, 0.68)',
                    'rgb(255, 120, 0)',
                    'hsv(51, 100, 98)',
                    'hsva(120, 40, 94, 0.5)',
                    'hsl(181, 100%, 37%)',
                    'hsla(209, 100%, 56%, 0.73)',
                    '#c7158577'
                ]
            };
        }
    }
</script>

<style scoped lang="scss">
    .btn-style-box {
        @import '../../../styles/init';
        padding-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, .15);

        .outer-box {
            .h0 {
                height: 0 !important;
                overflow: hidden;
            }
            .group-attribute-name {
                height: 20px;
                width: fit-content;
                user-select: none;
                color: #999;
                cursor: pointer;

                .group-icon {
                    font-size: 18px;
                }
            }
            .inner-box {
                height: 240px;
                overflow: hidden;
                transition: height .2s;

                .attr-item {
                    height: 38px;
                    display: flex;
                    overflow: hidden;
                    margin-top: 10px;

                    .attr-item-label {
                        padding-right: 12px;
                        line-height: 38px;
                    }
                    .block {
                        width: calc(100% - 43px);
                        line-height: 38px;
                    }
                    .block.text-three-block {
                        width: calc(100% - 56px);
                    }
                    .block.text-four-block {
                        width: calc(100% - 71px);
                    }
                    .color-block {
                        position: relative;

                        .yx-color-picker {
                            position: absolute;
                            top: 8px;
                            right: 3px;
                        }
                    }
                }
            }
        }
        @mixin com-outer-box {
            margin-top: 20px;
            padding-top: 12px;
            border-top: 1px solid #cccccc;
        }
        .effect-outer-box {
            @include com-outer-box;

            .inner-box {
                height: 48px;

                .attr-item {
                    .block {
                        width: calc(100% - 71px);
                    }
                }
            }
        }
        .bgc-outer-box {
            @include com-outer-box;
            .inner-box {
                height: 48px;

                .attr-item {
                    .block {
                        width: calc(100% - 56px);
                    }
                }
            }
        }
    }
</style>
<style lang="scss">
    .btn-style-box {
        .outer-box {
            .inner-box {
                .attr-item {
                    .el-slider__input.el-input-number--mini {
                        width: 52px;
                    }
                    .el-slider__runway {
                        width: 166px;
                    }
                    .color-block {
                        .el-color-picker--mini .el-color-picker__trigger {
                            width: 24px;
                            height: 24px;
                            padding: 2px;
                        }
                    }
                }
            }
        }
    }
</style>
